<script setup>
import {ref, defineProps} from 'vue'
import star from '@/assets/star.png'
import {EnvironmentOutlined, AuditOutlined, BookOutlined} from '@ant-design/icons-vue'
import starFill from '@/assets/starFill.png'

//定义传入的数据
const props = defineProps({
  title: {
    type: String,
    required: true
  },
  salary: {
    type: String,
    required: true
  },
  location: {
    type: String,
    required: true
  },
  experience: {
    type: String,
    required: true
  },
  qualifications: {
    type: Array,
    required: true
  }
})

</script>

<template>
  <div class="job-card">
    <div class="job-detail-header">
      <span class="job-name">{{ props?.title }}</span>
      <span class="job-salary">{{ props?.salary }}</span>
    </div>
    <div class="job-description-tags">
        <a-tag :bordered="false">
          <template #icon>
            <EnvironmentOutlined />
            {{props?.location}}
          </template>
        </a-tag>
        <a-tag :bordered="false" v-for="(tag,index) in props?.qualifications"
               :key="index">
          <template #icon>
            <AuditOutlined />
            {{tag}}
          </template>
        </a-tag>
      </div>
  </div>
</template>

<style scoped>
.job-detail-header {
  display: flex;
  justify-content: space-between;
  font-size: 24px;
  margin-bottom: 10px;
}

.job-card {
  padding: 10px;
  height: 96px;
  border-radius: 10px;
  border: 1px solid #ededed;
}

.job-name {
  font-size: 16px;
  margin-right: 50px;
  word-wrap: break-word;
  white-space: normal;
}

.job-salary {
  font-size: 16px;
  font-weight: bolder;
  color: red;
}

.job-description-tags {
  position: absolute;
  cursor: default;
  bottom: 10px;
  >a-tag {
    border: 0;
  }
}
</style>